
.storyboard {
    display: flex;
    flex-direction: row;
    background-color: #eee;
    height: 100vh;

    .sb-sidemenu {
        position: relative;
        width: 300px;
        height: 100%;
        background-color:#fff;
        border-bottom: 1px solid #ccc;
        display: flex;
        flex-direction: column;

        .line {
            border-right: 1px solid #ccc;
            height: 32px;
            top:12px;
            right:0;
            position: absolute;
        }
        .sb-sidemenu-header {
            height: 55px;
            border-bottom: 1px solid #ccc;

            span {
                width: 49%;
                height: 55px;
                line-height: 55px;
                display:inline-block;
                text-align: center;
                box-sizing: border-box;
                position: relative;
                cursor: pointer;

                &.active{
                    border-bottom:2px solid #EFBF1F;
                    font-weight: bold;
                }
                &.active:before {
                    content: '';
                    display: block;
                    position: absolute;
                    border-style: solid;
                    border-width: 10px;
                    border-color: transparent;
                    bottom: 0px;
                    left: 65px;
                    border-bottom-color: #EFBF1F;
                }
            }
        }
        .sb-sidemenu-body{
            flex-grow: 1;
            background-color: #fff;
        }
    }
    .sb-container {
        flex-grow: 1;
        position: relative;
        .sb-header{
            width: 100%;
            height: 55px;
            background-color: #fff;
            text-align: right;
            line-height: 55px;
        }
    }
}
